<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>工作空间</title>

<meta name="decorator" content="default" />
<style>
#tooltip {
	border: 1px solid red;
	background: #FF6;
	position: absolute;
	padding: 1px;
	color: #333;
	display: none;
}

.tabWork td {
	padding: 10px;
	padding-top: 30px;
}

input,textarea {
	padding: 9px;
	border: solid 1px #95B8E7;
	outline: 0;
	font: normal 13px/100% Verdana, Tahoma, sans-serif;
	width: 200px;
	background: #FFFFFF url('bg_form.png') left top repeat-x;
	background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF),
		color-stop(4%, #EEEEEE), to(#FFFFFF));
	background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

.breakLine {
	word-break: break-all;
}

.btnclass {
	width: auto;
	padding: 9px 15px;
	background: #617798;
	border: 0;
	font-size: 14px;
	color: #FFFFFF;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.btnclass {
	background-color: #E36526;
	background-image: linear-gradient(to bottom, #E36526, #E36526);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
</style>


<script type="text/javascript">
	$(document).ready(function() {

		//判断用户的客户数量，来控制隐藏

		var quantity = $("#quantity").html();
		if (quantity > 0) {

			$("#customerQuantity").hide();
			$("#yincang").show();
		}
		if (quantity <= 0) {

			$("#customerQuantity").show();
			$("#yincang").hide();

		}
		
	var bug=	$("#bug").text();
   if(bug !=null && bug !=""){
	   $("#customerQuantity").hide(); 
	   $("#currentCustomerNumber").hide();
   }	 	

		//收藏客户判断
		$("#collection").click(function() {

			var id = $("input[name=customerid]").val();

			$.ajax({
				type : "post",
				url : '${ctx}/crm/workbench/workbench/collection',
				data : {
					customerid : id
				},
				success : function(data) {
					if (data == "1") {
						alert("添至我的客户成功！")
					} else if (data == "2") {
						alert("该客户已添至我的客户")
					} else {
						alert("该客户已别人添加！")
					}
				}

			});
		});

		//省略行业字段	
		/* 		var title = $("#industryA").attr('title');
		 var index = title.indexOf(",");

		 if (title.length - 1 != index) {
		 var newtitle = title.substring(0, title.length - 1);
		 $("#industryA").attr('title', newtitle); //删除title最后的一个字符
		 var industryString = newtitle.substring(0, index);
		 industryString = industryString + "......";
		 $("#industryA").text(industryString); //a标签的文本显示加“。。。。”
		 } else {
		 title = title.substring(0, title.length - 1);
		 $("#industryA").text(title);//a标签如何只有一个行业，就去掉最后一个字符直接显示
		 } */

		//显示行业字段 
		/* 		var x = 5;
		 var y = 10;
		 $("#industryA").mouseover(function(e) {
		 var newtitle = this.title.substring(0, title.length);
		 this.myTitle = newtitle;
		 this.title = "";
		 var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>"; //创建DIV元素
		 $("body").append(tooltip); //追加到文档中
		 $("#tooltip").css({
		 "top" : (e.pageY + y) + "px",
		 "left" : (e.pageX + x) + "px"
		 }).show(); //设置X  Y坐标， 并且显示
		 }).mouseout(function() {
		 this.title = this.myTitle;
		 $("#tooltip").remove(); //移除
		 }).mousemove(function(e) {
		 $("#tooltip").css({
		 "top" : (e.pageY + y) + "px",
		 "left" : (e.pageX + x) + "px"
		 });
		 }) */

	});

	//按钮调链接 
	function change(url) {
		window.location.href = url;
	}
	//跳过 
	function submit1() {

		$("#inputFrom").attr("action", "${ctx}/crm/workbench/workbench/skip");
		$("#inputFrom").submit();
	}
	//下一个 
	function submit2() {

		var isnull = $("textarea[name='content']").val();
		if (isnull != "") {
			$("#inputFrom").attr("action",
					"${ctx}/crm/workbench/workbench/next");
			$("#inputFrom").submit();
		} else {

			alert("联系内容不能为空");
		}
	}

	//开始工作
	function submit3() {

		$("#searchForm").attr("action",
				"${ctx}/crm/workbench/workbench/CustomerSelect");
		$("#searchForm").submit();

	}
	//省市二级联动
	function findArea(elem){
		var provinceId = $(elem).val();
		$("#city option:not(:first)").remove();
		$("#city").val("-1");
		if (provinceId == "-1") {
			$("#s2id_city").find("a:first").find("span:first").html("请选择市区");
			return false;
		}
		
		$.ajax({
			type:"post",
			data:"parent_id="+provinceId,
			url:"${ctx}/crm/business/customer/findCity",
			success:function(data){
				for(var i=0;i<data.length;i++){
					var nodes = "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
					$("#city").append(nodes);
				}
			}
		});
		$("#s2id_city").find("a:first").find("span:first").html("请选择市区");
	}
</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active">
			<a href="javascript:void(0)">工作空间</a>
		</li>

	</ul>

	<c:if test="${message=='该条件暂无可用客户'}">
		<div class="alert alert-success">该条件暂无可用客户</div>
	</c:if>
	<c:if test="${message=='该信息错误，有可能已被修改，请检查账户！'}">
		<div id="bug" class="alert alert-success">该信息错误，有可能已被修改，请检查账户！</div>
	
		
	</c:if>
	<br />
	<div id="currentCustomerNumber" style="font-size: 20px;">
		&nbsp;&nbsp;&nbsp; 当前客户量 :
		<span style="color: red; vertical-align: middle;">
			<a id="quantity" href="${ctx}/crm/workbench/workbench/workbenchselect">${count}</a>
		</span>家
	</div>
	<div>
		<div id="customerQuantity" style="width: 1105px; padding-top: 20px; margin: 0 auto;">



			<form id="searchForm" action="" method="post" class="breadcrumb form-search" style="margin: auto; background-color: #FFFFFF">

				<ul class="ul-form" style="font-size: 14px;">
					<li style="width:260px;">
						<label>行业名：</label>
						<select name="industryNames" class="input-medium">
							<option value="">请选择</option>
							<c:forEach items="${industryNames}" var="industryName">
								<option value="${industryName}">${industryName}</option>
							</c:forEach>
						</select>
					</li>
					<li style="width:291;margin-left:-30px;">
						<label>状态：</label>
						<select name="selectstatus" class="input-medium" style="width: 200px;">
							<option value="">请选择状态</option>
							<option value="意向客户">意向客户</option>
							<option value="暂无意向">暂无意向</option>

						</select>
					</li>

					<li style="width:291;margin-left:-44px;">
						<label>省：</label>
						<select class="input-medium" id="province" name="province" onchange="findArea(this)">
							<option value="">请选择省份</option>
							<c:forEach items="${area}" var="area">
								<option value="${area.id}">${area.name}</option>
							</c:forEach>
						</select>
					</li>
					<li style="width:291;margin-left:-40px;">
						<label>市：</label>
						<select class="input-medium" id="city" path="city">
							<option value="">请选择市区</option>
						</select>
					</li>

					<li class="btns">
						<shiro:hasPermission name="workbench:workbench:workstart">
							<input id="btnSubmit" class="btn btn-primary" type="button" onclick="submit3()" value="开始工作" />
						</shiro:hasPermission>
					</li>

				</ul>
			</form>
		</div>

		<br />
		<br />

		<div id="yincang">
			<form id="inputFrom" action="" method="post">
				<div style="margin-left: 200px;">

					<table>
						<tr>
							<td style="width: 150px" align="center">客户状态：</td>
							<td style="text-align: left">
								<select name="statusId" style="font-size: 14px; width: 150px;">
									<c:if test="${customer.statusId=='暂无意向'}">
										<option value="意向客户">意向客户</option>
										<option selected="selected" value="暂无意向">暂无意向</option>
									</c:if>
									<c:if test="${customer.statusId=='意向客户'}">
										<option selected="selected" value="意向客户">意向客户</option>
										<option value="暂无意向">暂无意向</option>
									</c:if>
								</select>
							</td>
							<td style="width: 200px" align="center">客户名称：</td>
							<td style="text-align: left; width: 200px;">
								<input type="text" value="${customer.name}" readonly="readonly" style="border: 0px;" />
							</td>

						</tr>

						<tr>
							<td style="width: 120px" align="center">客户行业：</td>
							<td colspan="3" style="text-align: left;">${industry}</td>
						</tr>
						<tr>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td colspan="2" align="center">

								<shiro:hasPermission name="findcustomer:findCustomer:views">
									<input class="btnclass" type="button" value="客户详情" onclick="change('${ctx}/crm/findcustomer/findCustomer/form?id=${customer.id}')" />
								</shiro:hasPermission>

							</td>
							<td align="right">
								<shiro:hasPermission name="business:businessProject:project">
									<input class="btn btn-primary" type="button" value="添加项目" onclick="change('${ctx}/crm/business/businessProject/form?customerId=${customer.id}')" />
								</shiro:hasPermission>

							</td>
							<td align="left">
								&nbsp;
								<shiro:hasPermission name="workbench:workbench:collection">
									<input class="btn btn-primary" type="button" value="添至我的客户" id="collection" />
								</shiro:hasPermission>
							</td>
						</tr>
					</table>
				</div>


				<div style="margin-left: 240px;">
					<table cellspacing="0" cellpadding="4">
						<tr>
							<td colspan="3" style="width: 800px;">
								<span>客户联系人列表 ：</span>
							</td>
						</tr>
						<tr>
							<td width="2"></td>
							<td align="center" valign="top">

								<table style="width: 780px;" border="1">
									<tr align="center">
										<th align="center">联系人姓名</th>
										<th align="center">职位</th>
										<th align="center">邮箱</th>
										<th align="center">座机</th>
										<th align="center">手机</th>
									</tr>
									<c:forEach items="${contact}" var="contact">
										<tr align="center">

											<td>
												<a href="${ctx}/crm/business/hycrmContact/formChange?id=${contact.id}"> ${contact.name} </a>
											</td>
											<td>${contact.post}</td>
											<td>${contact.email }</td>
											<td>${contact.phone }</td>
											<td>${contact.mobile}</td>
										</tr>
									</c:forEach>
								</table>

							</td>
							<td width="2"></td>
						</tr>

						<tr>
							<td colspan="3" class="table_tdheight">
								<span>联系内容： </span>
							</td>
						</tr>
						<tr height="15">
							<td colspan="3">
								<textarea maxlength="300" name="content" style="height: 80px; width: 760px"></textarea>
								<input type="hidden" name="customerid" value="${customer.id}">
							</td>
						</tr>
						<tr>

							<td align="center" valign="top"></td>
							<td width="200px;" align="right">
								<shiro:hasPermission name="workbench:workbench:next">
									<input class="btn btn-primary" type="button" id="but2" onclick="submit2()" value="保存" />
								</shiro:hasPermission>
								&nbsp; &nbsp;
								<shiro:hasPermission name="workbench:workbench:skip">
									<input class="btnclass" type="button" id="but1" onclick="submit1()" value="跳过" />
								</shiro:hasPermission>
							</td>
						</tr>
					</table>
				</div>
			</form>
		</div>
	</div>
</body>
</html>